<template>
  <div ww3 auto>
    <div >
      <el-page-header @back="goBack" content="下载素材">
      </el-page-header>
    </div>

    <el-card class="box-card" v-for=" x in list" :key="x.basketId">

      <el-tag type="info" ww1>个人授权：{{x.basketCount}}件</el-tag>


      <div class="down-wap">
        <dl flex ww1  space-be>
          <dt flex flex-c>
            <a target="_blank" href="" class="down-mg">
              <img :src="fileUrl + x.filesImg1" alt="" ww1 h-1>
            </a>

            <div class="right-info">
              <a target="_blank" href="" fz-16>{{ x.title }}</a>
              <p fz-14="">
                <span>类型：{{ x.categoryName }}</span>
                <span>分辨率：{{ x.resolutionRatio }}</span>
              </p>

            </div>
            
          </dt>
          <dd fz-14>
            <p red="">{{ x.n_price || 0 }}元</p>

            <el-dropdown @command="selectItem(x, $event)">
              <span class="el-dropdown-link">
                个人授权<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="individualPrice">个人授权 {{x.individualPrice || 0}}元</el-dropdown-item>
                <el-dropdown-item command="enterprisePrice">企业授权 {{x.enterprisePrice || 0}}元</el-dropdown-item>
                <el-dropdown-item command="enterprisePlusPrice">企业PLUS授权 {{ x.enterprisePlusPrice || 0 }}元</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </dd>
        </dl>
      </div>
      <div>


        <el-collapse>
          <el-collapse-item>
            <template slot="title">
              授权时间自生成授权书开始，购买后未填写授权书视为未获得使用许可。
              <i style="color: var(--green)">获取授权书</i>
            </template>
            <el-form ref="ruleForm" label-width="108px" >
              <el-form-item label="被授权人姓名 "  prop="name">
                <el-input v-model="x.userName" style="width: 50%" placeholder="请填写被授权人真实姓名"></el-input> 
              </el-form-item>
              <el-form-item label="身份证号码 "  prop="name">
                <el-input v-model="x.idcard" style="width: 50%" placeholder="平台将严格保密个人信息，不会提供给任何人"></el-input>
              </el-form-item>
            </el-form>

          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>


    <div class="footer-apply ww1" style="text-align: right">
      <p fz-14>
        <span>共 <i red="">{{ list.length }}</i> 件</span>
        <span style="margin-left: 10px">总计 <i red="">{{totalPrice}}</i> 元</span>
      </p>
      <p fz-14>可用余额：<i red="">{{ remainingSum }}</i>元</p>
    </div>
    <el-divider></el-divider>


    <div class="footer-apply ww1" style="text-align: right">
      <p  flex flex-c fz-14 style="justify-content: flex-end">
        <el-checkbox v-model="ruleForm.checked"></el-checkbox>
        &nbsp;已确认素材信息， 并认可<a href="" target="_blank" blue>《授权规则》</a>及<a href="" target="_blank" blue>《退款规则》</a>
      </p>
      <el-button type="primary" @click="sure" style="padding: 12px 70px!important;">提交</el-button>
    </div>

  </div>
</template>

<script>
import http from "@/api/info/car";
import $http from "@/api/collection/collection"
export default {
  name: "Down",

  computed: {
    totalPrice() {
      let total = 0
      this.list.forEach(v => {
        total += v.n_price
      })
      return total
    }
  },
  watch: {
    '$route.query.id'() {
      this.init()
    }
  },
  created() {
    this.init()
  },
  data() {
    return {
      fileUrl: this.$url.fileUrl,
      remainingSum: 0,
      ruleForm: {
        checked: false,
      },
      list: [],
    };
  },


  methods: {
    init() {
      let that = this;
      const id = this.$route.query.id.split(',')
      this.remainingSum = JSON.parse(sessionStorage.user).sysUser.remainingSum

      http.carList({
        userId: sessionStorage.getItem('userId'),
      }).then(res => {
        console.log(res, '111111111');
        const list = []
        res.data.list.forEach(res => {
          if(id.indexOf(res.basketId + '') > -1) {
            res.n_price = res.individualPrice
            res._name = ''
            res._idno = ''
            res._type = 1
            list.push(res)
          }
        })
        this.list = list

        if(this.list.length === 0) {
          debugger;
          let downVideoId  = this.$route.query.id;
          this.getVideoDetailed(downVideoId);

        }
      })
    },
    //获取视频详情
    getVideoDetailed(videoId) {
      let data = {
        videoId: videoId
      }
      $http.getVideoDetailed(data).then((res) => {
        console.log('获取视频详情',res);
        debugger;
        let data = res.data.cmsVideo;  
        data.n_price = data.individualPrice
        data._name = ''
        data._idno = ''
        data._type = 1
        this.list.push(data);
      })
    },
    sure() {
      if(this.list.length === 0) {
        return this.$message.error('无素材信息')
      }

      if(!this.ruleForm.checked) {
        return this.$message.error('请确认素材信息，认可相关规则，并勾选')
      }

      const arr = []

      this.list.forEach(v => {
        arr.push({
          "basketId": v.basketId,
          "prodId":v.prodId,
          "total": v.n_price,
          "videoType": v._type,
          "categoryId":v.categoryIds,
          "resolutionRatio": v.n_price,
          "priceUnit":1,
          "userName": v.userName, 
          "idcard": v.idcard
        })
      })

      http.pay({
        "userId":sessionStorage.getItem('userId'),
        "total": this.totalPrice,
        "basketList":arr,
      }).then(res => {
        if(res.code === 0) {
          this.$router.push('/account/buy')
        }else{
          return this.$message.error(res.msg)
        }
      })
    },
    selectItem(data, type) {
      data.n_price = data[type]
      data._type = {
        individualPrice: 1,
        enterprisePrice: 2,
        enterprisePlusPrice: 3,
      }[type]
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.box-card{
  margin-top: 2%;
  min-height: 20vh;
}
.down-wap{
  padding: 12px 3%;
}
[ww3] >>> .el-divider--horizontal{
  margin: 10px 0 ;
}

.down-mg{
  width: 102px;
  height: 58px;
}

dt a{
  color: var(--color-black);
}
dt p{
  padding-top: 10px;
}
dt p span{
  color: var(--grey);

}

dd p {
  margin-bottom: 10px;
  text-align: center;
}

.right-info{
  margin-left: 12px;
}
.el-dropdown-link{
  cursor: pointer;
}

.right-info p span {
  margin-right: 10px;
}

.footer-apply{
  color: var(--grey);
  margin-top: 16px;
}
.footer-apply p{
 margin-bottom: 12px;
}
</style>